<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 使用节点操作 在页面上根据数据显示出表格，并且实现删除功能
        var arr = [{
                name: 'Jack',
                age: 18,
                gender: '男'
            },
            {
                name: 'Rose',
                age: 20,
                gender: '女'
            }, {
                name: 'Top',
                age: 22,
                gender: '男'
            }
        ];
        var tableDom = document.createElement("table");
        var tbodyDom = document.createElement("tbody");
        // tableDom.setAttributeNode("tbodyDom");
        tableDom.appendChild(tbodyDom)

        for (var i = 0; i < arr.length; i++) {
            var trDom = document.createElement("tr")
            tbodyDom.appendChild(trDom)
            for (var j in arr[i]) {
                var tdDom = document.createElement("td")
                // 把td放在tr里面
                trDom.appendChild(tdDom)
                var textDom = document.createTextNode(arr[i][j])
                // 把内容放到td里面
                tdDom.appendChild(textDom)
                console.log(arr[i][j]);
            }
          // 追加删除tr操作
            var delDom = document.createElement("td")
            delDom.innerHTML = '<button onclick="deleteTr(this)">删除</button>';
            trDom.appendChild(delDom)
            // 将创建的tr加入到table标签中
            tableDom.appendChild(trDom);

            // 将创建的tr加入到table标签中
            tableDom.appendChild(trDom)
        }
        document.body.appendChild(tableDom)

        // 删除tr创建的函数deleteTr
        function deleteTr(obj) {
            console.log(obj);
            document.querySelector('table').removeChild(obj.parentElement.parentElement)
        }
    </script>
</body>

</html>